import React from 'react';
import './merchandise.less';
import { Link } from 'react-router';
import { Breadcrumb, Input, Button, Table, Pagination, Popconfirm, Form } from 'antd';

import moment from 'moment';
import $ from 'jquery';
import Config from '../../common/config';

const config = new Config();
const token = sessionStorage.getItem('token');
class caseEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // 数据
      title: '', // 标题
      publisher: '', // 发布人
      page: 1, // 当前页
      pageSize: 10, // 每页显示的条数
      total: 0, // 总数
      visible: false //案例详情模态框
    }
    this.InputTitle = this.InputTitle.bind(this)
    this.InputPublisher = this.InputPublisher.bind(this)
    this.onChangePage = this.onChangePage.bind(this)
  }

  componentDidMount() {
    const state = this.props.location.state
    if (state) {
      this.setState({
        page: state.page,
        pageSize: state.pageSize,
        title: state.title,
        describe: state.describe,
      }, () => {
        this.getData()
      })
    } else {
      this.getData()
    }
  }

  //获取案例列表
  getData() {
    const { page, pageSize, title, publisher } = this.state
    $.ajax({
      url: `${config.consultant_gfyy}/counselor/list`,
      type: 'get',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      data: {
        page,
        pageSize,
        weChatId: title
      },
      success: (res) => {
        console.log('获取产品列表', res)
        if (res.code === 200) {
          res.data.rows.forEach((item, index) => {
            item.key = index + 1 + (this.state.page - 1) * this.state.pageSize;
          })
          this.setState({
            total: res.data.count,
            data: res.data.rows
          })
        }
      }
    });
  }

  // 表头
  getColumns() {
    return [{
      title: '序号',
      width: '10%',
      dataIndex: 'id'
    },
    {
      title: '微信号',
      width: '15%',
      dataIndex: 'weChatId'
    },
    {
      title: '二维码图片',
      width: '20%',
      render(record) {
        return <p><img src={config.Filepath + record.qrCodeImg} style={{ width: "40px" }} /></p>
      }
    },
    {
      title: '发布时间',
      width: '20%',
      render(record) {
        return moment(record.createdAt).format('YYYY-MM-DD HH:mm')
      }
    },
    {
      title: '排序级别',
      width: '10%',
      dataIndex: 'sortCode'
    },
    {
      title: '操作',
      width: '25%',
      render: record => {
        const { page, pageSize, title, publisher } = this.state
        const paths = {
          pathname: `/consultant_gfyy/update`,
          state: {
            data: record,
          }
        }
        const paths1 = {
          pathname: `/caseedit_zml_detail`,
          state: {
            data: record
          }
        }
        return <p>
          {/* <a href='javascript:void(0)'>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 */}
          <Link to={paths}>修改</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Popconfirm title="您确定要删除么？" okText="是" cancelText="否" onConfirm={this.deleteNews.bind(this, record.id)}>
            <a href="javascript:void(0)'">删除</a>
          </Popconfirm>
        </p>
      }
    }];
  }

  // 输入搜索值
  InputTitle(e) {
    this.setState({
      title: e.target.value
    });
  }

  // 输入搜索值
  InputPublisher(e) {
    this.setState({
      publisher: e.target.value
    });
  }

  // 搜索/清空
  filterOrders(key) {
    if (key) {
      // 搜索
      this.setState({
        page: 1
      }, () => {
        this.getData();
      });
    } else {
      // 清空
      this.setState({
        page: 1,
        title: '',
        publisher: '',
      }, () => {
        this.getData();
      });
    }
  }

  // 删除新闻
  deleteNews(id) {
    $.ajax({
      url: `${config.consultant_gfyy}/counselor/delete`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      data: { id },
      success: (res) => {
        console.log('删除新闻', res)
        if (res.code === 200) {
          let { page, data } = this.state
          if (data.length === 1) {
            page = page - 1 || 1
          }
          this.state.page = page
          this.getData()
        }
      }
    });
  }

  // 显示模态框
  showModal(value) {
    console.log(value)
    this.setState({
      visible: true
    })
    this.props.form.setFieldsValue({
      product: "测试产品" //产品
    })
  }


  // 切换分页
  onChangePage(page) {
    this.setState({
      page
    }, () => {
      this.getData();
    });
  }

  addFloor() {
    window.location.hash = `/consultant_gfyy/add`
  }
  render() {
    const columns = this.getColumns();
    const { visible } = this.state;
    const formItemLayout = { labelCol: { span: 10 }, wrapperCol: { span: 14 }, };
    return (
      <div className='contentBox clearfix'>
        <div className="member-content-Search">
          <div className='breadcrumb'>
            <Breadcrumb separator=">">
              <Breadcrumb.Item>官网管理</Breadcrumb.Item>
              <Breadcrumb.Item>咨询顾问</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className='orderfilter'>
            <div className="member-content-Search" style={{ marginBottom: 20 }}>
              <div className='addetd' style={{ zIndex: 1 }}>
                <Input addonBefore='微信号' placeholder="请输入" value={this.state.title} onChange={this.InputTitle} />
              </div>
              <Button className='ant-btn-primary' icon='search' onClick={this.filterOrders.bind(this, 1)}>搜索</Button>
              <Button className='ant-btn-primary' icon='sync' onClick={this.filterOrders.bind(this, 0)}>重置</Button>
            </div>
          </div>
        </div>
        <div className='allgoods-table clearfix'>
          <Table columns={columns} dataSource={this.state.data} pagination={false} bordered />
          <div className='goods-label-tabletr'>
            <Button className='goods-label-table-app' onClick={() => this.addFloor()} icon="plus">新增</Button>
          </div>
        </div>
        <div className='goods-label-let clearfix'>
          <div className="floor-ppagi">
            {
              this.state.total == 0 ?
                <p className="floor-ppagip">
                  共{this.state.total}条记录
              </p> :
                <p className="floor-ppagip">
                  当前显示
                {this.state.pageSize * (this.state.page - 1) + 1}—
                {this.state.pageSize * this.state.page < this.state.total ? this.state.pageSize * this.state.page : this.state.total}条记录，
                共{this.state.total}条记录
              </p>
            }
            <Pagination current={this.state.page} total={this.state.total || 1} defaultPageSize={this.state.pageSize} onChange={this.onChangePage.bind(this)} />
          </div>
        </div>
        {/* <Modal
          className="little-tool-modal"
          title={
            <div className="clearfix" style={{width:'90%'}}>
             <p style={{float:'left'}}>案例详情</p>
            </div>  
          }
          visible={visible}
          footer={
            <div>
              <Button type="primary" onClick={()=>{this.setState({visible:false})}}>确定</Button>
            </div>
          }
        >
          <Form>
            <Row>
              <Col span={7}>
                <FormItem {...formItemLayout} label="产品" style={{minHeight:'60px',marginBottom:0}}>
                  {getFieldDecorator('product',{
                    rules:[{required:true,message:'请输入产品名称'}]
                  })}
                </FormItem>
              </Col>
            </Row>
          </Form>
          
        </Modal> */}
      </div>
    )
  }
}
const caseEdit1 = Form.create()(caseEdit);
export default caseEdit;
